<script setup>
import {
    ref,
    onMounted,
    onUpdated,
    onBeforeMount,
    onBeforeUpdate,
    onBeforeUnmount,
    onErrorCaptured,
    onRenderTracked,
    onRenderTriggered,
    onActivated,
    onDeactivated,
    onServerPrefetch
} from 'vue';


onMounted(() => {

});
</script>
<template>
    <div class="page_wrap system_index" position="systempage">
        <Menu class="system_menu" />

        <div class="sub_menu_content">
            <router-view></router-view>
        </div>

    </div>
</template>
<style scoped>
.page_wrap {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;

    background: #031226;
}

.system_index {
    display: flex;
}

.system_menu {

    position: relative;
    left: 0px;
    transition: all 0.6s ease-in-out;
    width: 256px;
    height: 100%;
    background: #051A35;

    z-index: 2;
}


:deep(.my_menu.hidden .menu_com) {
    /* width:60px;
    transition: all 1s ease-in-out; */
    /* overflow: hidden; */
    visibility: hidden;
}

.my_menu.system_menu {
    overflow: hidden;
    min-width: 256px;
}

.system_menu.hidden {
    left: 0px;
    width: 60px;
    min-width: 60px;
}

.system_menu.hidden+.sub_menu_content {
    width: calc(100% + 256px);
}

.sub_menu_content {
    width: calc(100% - 256px);

}</style>